<template>
	<view class="homepage">
		<view class="bg">
			<view class="colorView"></view>
			<view class="basicinformation">
				<view class="w">
					<view class="basicinformation-top" @touchstart="touchstartBasic(1)" @touchend="touchendBasic" :style="{backgroundColor:(basicColor == 1 ? '#D3D3D3' : '')}">
						<view class="basicinformation-top-span">基本资料</view>
						<view class="iconfont iconarrow"></view>
					</view>
					<view class="basicinformation-center" @touchstart="touchstartBasic(2)" @touchend="touchendBasic" :style="{backgroundColor:(basicColor == 2 ? '#D3D3D3' : '')}">
						<view class="basicinformation-center-span1">信息</view>
						<view class="basicinformation-center-span2">点击编辑我的信息</view>
					</view>
					<view class="basicinformation-center" @touchstart="touchstartBasic(3)" @touchend="touchendBasic" :style="{backgroundColor:(basicColor == 3 ? '#D3D3D3' : '')}">
						<view class="basicinformation-center-span1">公司</view>
						<view class="basicinformation-center-span2">点击编辑我的公司</view>
					</view>
					<view class="basicinformation-center" @touchstart="touchstartBasic(4)" @touchend="touchendBasic" :style="{backgroundColor:(basicColor == 4 ? '#D3D3D3' : '')}">
						<view class="basicinformation-center-span1">学校</view>
						<view class="basicinformation-center-span2">点击编辑我的学校</view>
					</view>
					<view class="basicinformation-center" @touchstart="touchstartBasic(5)" @touchend="touchendBasic" :style="{backgroundColor:(basicColor == 5 ? '#D3D3D3' : '')}">
						<view class="basicinformation-center-span1">感情状况</view>
						<view class="basicinformation-center-span2">点击编辑我的感情状况</view>
					</view>
					<view class="basicinformation-center">
						<view class="basicinformation-center-span1">注册时间</view>
						<view class="basicinformation-center-span2" style="color: #333333;">2020-10-08</view>
					</view>
					<view class="basicinformation-bottom" @touchstart="touchstartBasic(6)" @touchend="touchendBasic" :style="{backgroundColor:(basicColor == 6 ? '#D3D3D3' : '')}">
						更新基本资料,方便大家了解你
					</view>
				</view>
			</view>
			<view class="album">
					<view class="album-top">
						精选照片
					</view>
					<view class="album-center">
						<view class="album-center-photo">
							<view class="album-center-photos">
								<view class="iconfont iconindexfull"></view>
								<view class="album-center-photos-span">展示你的精美照片</view>
							</view>
						</view>
						<view class="album-center-photo">
							<view class="album-center-photos">
								<view class="iconfont iconindexfull"></view>
								<view class="album-center-photos-span">展示你的精美照片</view>
							</view>
						</view>
					</view>
					<view class="album-bottom">
						上传精选照片,展示在你的主页
					</view>
			</view>
			<view class="hobby">
				<view class="hobby-top">
					兴趣爱好
				</view>
				<view class="hobby-center">
					<view class="hobby-center-title">
						<view class="hobby-center-title-icon"></view>
						<view>喜欢的电影</view>
					</view>
					<view class="hobby-center-edit">
						<view>编辑</view>
						<view class="iconfont iconarrow" style="color: #FE6440;"></view>
					</view>
				</view>
				<view class="hobby-bottom">
					你还没有喜欢的电影
				</view>
				<view class="hobby-center">
					<view class="hobby-center-title">
						<view class="hobby-center-title-icon"></view>
						<view>喜欢的音乐</view>
					</view>
					<view class="hobby-center-edit">
						<view>编辑</view>
						<view class="iconfont iconarrow" style="color: #FE6440;"></view>
					</view>
				</view>
				<view class="hobby-bottom">
					你还没有喜欢的音乐
				</view>
				<view class="hobby-center">
					<view class="hobby-center-title">
						<view class="hobby-center-title-icon"></view>
						<view>喜欢的音乐</view>
					</view>
					<view class="hobby-center-edit">
						<view>编辑</view>
						<view class="iconfont iconarrow" style="color: #FE6440;"></view>
					</view>
				</view>
				<view class="hobby-bottom">
					你还没有喜欢的音乐
				</view>
			</view>
			<view class="colorView" style="height: 50px;">
				
			</view>
		</view>
	</view>
</template>

<script>
export default{
	name: 'MeMainpage',
	data() {
		return {
			basicColor: 0,
	
		}
	},
	methods: {
		touchstartBasic(e) {
			this.basicColor = e;
		},
		touchendBasic() {
			if(this.basicColor == 1 || this.basicColor == 6)
			{
				uni.navigateTo({
					url: '../../me/relatedPages/BasicInformation',
					success: (res) => {
						console.log("ok");
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
			this.basicColor = 0;
		}
	}
}
</script>
	
<style>
	.bg {
		background-color: #EFEFEF;
		height: 992rpx;
	}
		.colorView{
			height: 10px;
			background-color: #EFEFEF;
		}
		.basicinformation{
			background-color: #fff;
			margin-bottom: 10px;
		}
			.w{
				margin: 0 12px 0 12px;
			}
				.basicinformation-top{
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: rgb(153,153,153,0.3) solid 1px;
				}
					.basicinformation-top-span{
						font-size: 16px;
						letter-spacing: 0.5px;
					}
					.iconarrow{
						font-size: 28px;
						transform:rotate(270deg);
					}
				.basicinformation-center{
					height: 30px;
					display: flex;
					align-items: center;
					border-bottom: rgb(153,153,153,0.3) solid 1px;
				}
					.basicinformation-center-span1{
						width: 70px;
						font-size: 13.5px;
						color: #555555;
						letter-spacing: 0.8px;
					}
					.basicinformation-center-span2{
						font-size: 13.5px;
						color: #007AFF;
						letter-spacing: 0.5px;
					}
				.basicinformation-bottom{
					height: 32px;
					color: #007AFF;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
				}
		.album{
			background-color: #fff;
			margin-bottom: 10px;
			height: 232px;
		}
			.album-top{
				display: flex;
				align-items: center;
				height: 35px;
				font-size: 16px;
				letter-spacing: 0.5px;
				border-bottom: rgb(153,153,153,0.3) solid 1px;
				margin-left: 10px;
				margin-right: 10px;
			}
			.album-center{
				margin-top: 10px;
				height: 150px;
				margin-left: 5px;
				margin-right: 5px;
				display: flex;
				justify-content: space-between;
			}
				.album-center-photo{
					width: 180px;
					height: 150px;
					border: rgb(153,153,153,0.6) dashed 1px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
					.album-center-photos{
						width: 110px;
						height: 70px;
						color: rgb(153,153,153,0.8);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
					}
						.iconindexfull{
							font-size: 45px;
						}
						.album-center-photos-span{
							font-size: 12px;
							letter-spacing: 0.5px;
						}
			.album-bottom{
				height: 34px;
				color: #007AFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
			}
		.hobby{
			background-color: #fff;
			margin-bottom: 10px;
		}
			.hobby-top{
				height: 35px;
				display: flex;
				align-items: center;
				border-bottom: rgb(153,153,153,0.5) solid 1px;
				font-size: 16px;
				letter-spacing: 0.5px;
				margin-left: 10px;
				margin-right: 10px;
			}
			
			.hobby-center{
				height: 26px;
				display: flex;
				justify-content: space-between;
				letter-spacing: 0.5px;
			}
				.hobby-center-title{
					width: 85px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 14.5px;
					color: #555555;
				}
					.hobby-center-title-icon{
						height: 20px;
						width: 3px;
						background-color: #FE6440;
						border-radius: 10px;
					}
				.hobby-center-edit{
					display: flex;
					align-items: center;
					width: 60px;
					margin-right: 5px;
					font-size: 13px;
					color: #5B5B5B;
				}
			.hobby-bottom{
				height: 26px;
				font-size: 12px;
				color: #6C6C6C;
				display: flex;
				align-items: center;
				margin-left: 10px;
				margin-right: 10px;
				border-bottom: rgb(153,153,153,0.3) 1px solid;
				border-top: rgb(153,153,153,0.3) 1px solid;
			}
</style>
